
import { useEffect, useRef, useState } from "react"
import { GetQuestionBanks } from "../../api/exam"
import "../../css/examIndex.css"
import { Table, Tag, Space, Button, Pagination } from "antd"


const TestPaper = () => {
    const [tableData, setTableData] = useState([]);
    const [pages, setPages] = useState({ page: 1, limit: 10 });
    // const [tableScorll, setScroll] = useState(500);

    const onChange = (page, limit) => {
        // if (limit > 10) {
        //     setScroll(500);
        // }else{
        //     setScroll(100);
        // }
        setPages({ ...pages, page: page, limit: limit })
    }
    useEffect(() => {
        const bindData = async () => {
            console.log(pages, "llflsdmfldf");
            const res = await GetQuestionBanks({ page: pages.page, limit: pages.limit });
            console.log(res.data.data);
            if (res.result === 0) {
                res.data.data.map((d, i) => d.key = i);
                setTableData(res.data.data);
            }
        }
        bindData();
    }, [pages])


    const columns = [
        {
            title: "序号",
            dataIndex: 'key',
            render: (text, record) => (
                <span>{text + 1}</span>
            )
        },
        {
            title: '题库',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '题目数',
            dataIndex: 'count',
            key: 'count',
        },
        {
            title: '难度',
            dataIndex: 'lv',
            key: 'lv',
            render: (text, record) => (
                <span>{text <= 3 && <Tag color="magenta">{text}</Tag>}</span>
            )
        },

        {
            title: '标签',
            dataIndex: 'labels',
            key: 'labels',
        },
        {
            title: '发布',
            dataIndex: 'isPublish',
            key: 'isPublish',
        },
        {
            title: '禁用',
            dataIndex: 'isBan',
            key: 'isBan',
        },
        {
            title: '操作',
            dataIndex: 'actions',
            key: 'actions',
            render: (text, record) => (
                <div>
                    <Button danger style={{}}>
                        Primary
                    </Button>
                </div>
            )
        }
    ];

    return (
        <div className="examIndexContainer" >
            <div className="examContainer">
                <div className="top">

                </div>
                <div className="dataTable" >
                    <Table dataSource={tableData} columns={columns} scroll={{
                        y: 500,
                    }} pagination={false} bordered />
                </div>
                <div style={{marginTop:"10px"}}>
                    <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={(page, limit) => { onChange(page, limit) }} />
                </div>
            </div>
        </div>
    )
}

export default TestPaper